<template>
	<view class="appointment-wrap u-p-30">
		<!--表单-->
		<view class="appointment-form">

			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="营业时间"
					prop="openhours">
					<u-input type="select" :select-open="selectShow" v-model="model.openhours" placeholder="请选择营业时间"
						:placeholderStyle="placeholderStyle" @click="onSelect('time')"></u-input>
				</u-form-item>
			</u-form>
			<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="营业天数" prop="weeks">
				<u-input type="select" placeholder="请选择营业天数" disabled :placeholderStyle="placeholderStyle"
					v-model="model.weeks" @click="onSelect('week')"></u-input>
			</u-form-item>
			<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="姓名" prop="realname">
				<u-input placeholder="请输入姓名" :placeholderStyle="placeholderStyle" v-model="model.realname" type="text">
				</u-input>
			</u-form-item>
			<u-form-item :labelStyle="labelStyle" label-position="left" label="手机号" prop="phone" label-width="150">
				<u-input placeholder="请输入手机号" :placeholderStyle="placeholderStyle" v-model="model.phone" type="number">
				</u-input>
			</u-form-item>
			<!--日期弹窗-->
			<u-select v-if="selectShow" :mode="selectMode" :list="selectList" v-model="selectShow"
				@confirm="selectConfirm"></u-select>
			<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
			<!--星期弹窗-->
			<u-popup v-model="showWeeksModal" safe-area-inset-bottom mode="bottom">
				<view class="week-modal">
					<view class="u-flex u-row-between u-p-x-30 week-modal--head ">
						<view></view>
						<view class="action text-green" @tap="saveWeekModal">确定</view>
					</view>

					<view class="u-flex u-flex-wrap u-p-x-30 u-p-y-30 u-row-between week-modal--content">
						<view v-for="(item, index) in weekcheckbox" class="week-btn" :key="index">
							<u-button @click="onSelectWeek(index)" :plain="!item.checked" size="medium" type="success">
								{{ item.name }}
							</u-button>
						</view>
					</view>
				</view>
			</u-popup>
			<!--确认提交表单-->
			<view class="f-fixed u-padding-20">
				<u-button @click="save" shape="circle" type="primary" :custom-style="customStyle">立即预约</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import Config from '../../common/js/config.js'
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		components: {},
		data() {
			return {
				pickerShow: false,
				showWeeksModal: false, //星期弹窗
				selectShow: false,
				selectMode: 'mutil-column', // single-column, mutil-column, mutil-column-auto
				selectType: '',
				labelStyle: {
					'font-size': '28rpx',
					'font-weight': '500',
					color: '#333'
				},
				placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;',
				model: {
					openhours: '', //营业时间
					openweeks: '', //营业周期
					weeks: '',
					realname:'',
					phone:''

				},
				customStyle: {
					backgroundColor: '#262239'
				},
				selectList: [],
				weekcheckbox: [{
						value: '1',
						name: '周一',
						checked: false
					},

					{
						value: '2',
						name: '周二',
						checked: false
					},
					{
						value: '3',
						name: '周三',
						checked: false
					},
					{
						value: '4',
						name: '周四',
						checked: false
					},
					{
						value: '5',
						name: '周五',
						checked: false
					},
					{
						value: '6',
						name: '周六',
						checked: false
					},
					{
						value: '7',
						name: '周日',
						checked: false
					}
				],
			};
		},
		computed: {
			selectWorkerTime() {
				let mArr = [];
				for (let i = 0; i <= 24; i++) {
					let t = String(i).padStart(2, '0');
					mArr.push({
						value: `${t}:00`,
						label: `${t}:00`
					}, {
						value: `${t}:30`,
						label: `${t}:30`
					});
				}
				mArr.pop();
				return [mArr, mArr];
			}
		},
		onLoad() {

		},
		methods: {
			onSelect(type) {
				this.selectType = type;
				switch (type) {
					case 'time':
						this.selectShow = true;
						this.selectMode = 'mutil-column';
						this.selectList = this.selectWorkerTime;
						break;
					case 'week':
						this.showWeeksModal = true;
						break;
					default:
						return;
				}
			},
			// 选择时间
			selectConfirm(e) {
				switch (this.selectType) {
					case 'time':
						this.model.openhours = '';
						e.map((val, index) => {
							this.model.openhours += this.model.openhours == '' ? val.label : ' - ' + val.label;
						});
						break;
					default:
						return;
				}
			},
			// 选择星期
			saveWeekModal() {
				this.showWeeksModal = false;
				let arr = [];
				let arr2 = [];
				this.weekcheckbox.forEach(item => {
					if (item.checked) {
						arr.push(item.value);
						arr2.push(item.name);
					}
				});
				this.model.openweeks = arr.join(',');
				this.model.weeks = arr2.join(',');
			},

			// 选择星期
			onSelectWeek(index) {
				this.weekcheckbox[index].checked = !this.weekcheckbox[index].checked;
			},
			// 弹窗按钮
			onAuthBtn(path) {
				path &&
					this.$Router.push({
						path: path
					});
				this.showNotice = false;
			},
			//提交保存数据
			save() {
				let data = {
					openhours: this.model.openhours,
					openweeks: this.model.openweeks,
					realname: this.model.realname,
					phone: this.model.phone

				};
				this.$api.sendRequest({
					url: '/appointment/api/appointment/add',
					data: data,
					success: res => {
						if (res.code == 0) {
							this.$util.showToast({
								title: "预约成功"
							});
							setTimeout(() => {
								this.$util.redirectTo('/newpages/appointment/index', {}, "redirectTo");
							}, 1000);

						} else {
							this.$util.showToast({
								title: res.message
							});
							this.flag = false;
						}
					},
					fail: res => {
						this.flag = false;
					}
				})
			},






		}
	};
</script>


<style lang="scss">
	.appointment-wrap {
		background: #FFFFFF;
		height: 100vh;
	}

	.week-modal {
		.week-modal--head {
			height: 100rpx;
			border-bottom: 1rpx solid $u-border-color;

			.text-cancel {
				color: #ccc;
			}

			.text-green {
				color: #18b566;
			}
		}

		.week-modal--content {
			.week-btn {
				margin-right: 20rpx;
				margin-bottom: 20rpx;

				&:nth-of-type(3n) {
					margin-right: 0;
				}
			}
		}
	}
</style>

